<template>
  <div class="main">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="奖项名称" label-width="150px">
          <el-select  v-model="formInline.title" placeholder="请选择奖项目前进度">
            <el-option
                v-for="item in AwardOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="奖项目前进度" label-width="150px">
          <el-select v-model="formInline.status" placeholder="请选择奖项目前进度">
            <el-option label="未申请" value="未申请" />
            <el-option label="已申请" value="已申请" />
            <el-option label="未答辩" value="未答辩" />
            <el-option label="已答辩" value="已答辩" />
            <el-option label="已出结果" value="已出结果" />
          </el-select>
        </el-form-item>
        <el-form-item label="奖项目前结果" label-width="150px">
          <el-select v-model="formInline.result" placeholder="请选择奖项目前结果">
            <el-option label="无结果" value="无结果" />
            <el-option label="未通过" value="未通过" />
            <el-option label="已通过" value="已通过" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body">
      <el-table
          v-if="tableData.length > 0"
          :data="tableData"
          height="480px"
          highlight-current-row
          @current-change="toAwardDetails"
          style="width: 90%;margin-left: 50px;cursor: pointer"
          border
      >
        <el-table-column prop="studentAwardsId" label="学生奖项Id"/>
        <el-table-column prop="awardId" label="奖项Id" v-if=false />
        <el-table-column prop="title" label="奖项名称"  />
        <el-table-column prop="money" label="奖项金额"  />
        <el-table-column prop="number" label="奖项数量"  />
        <el-table-column prop="deadline" label="截止期限"  />
        <el-table-column label="我的进度" >
          <template #default="scope">
            <el-tag :type="changeColor(scope.row.status)">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="当前结果" >
          <template #default="scope">
            <el-tag :type="changeColor(scope.row.result)">{{scope.row.result}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="paginations.page_index"
                     :page-sizes="paginations.page_sizes"
                     :page-size="paginations.page_size"
                     :layout="paginations.layout"
                     :total="paginations.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {SelectAllAwardByUserId, selectStudentAwardsByForm} from "../../api/studentAwards";
import {getAwardOptions} from "../../api/award";

export default {
  name: "MyAward",
  data() {
    return {
      AwardOptions:{},
      paginations: {
        page_index: 1, //当前页面
        total: 0,      //总页数
        page_size: 5,  //每页显示的记录条数
        page_sizes: [5, 10, 15, 20],  //可选择的page_size范围
        layout: "total, sizes, prev, pager, next, jumper"  //翻页属性
      },
      color:'',
      tableData: [],
      allTableData: [],
      formInline:{
        studentId:this.$store.state.user.id,
        status:'全部进度',
        result:'全部结果',
        title:'全部奖项',
      },
    };
  },
  created() {
    this.getProfile();
    this.toGetAwardOptions();
  },
  methods: {
    getProfile() {
      SelectAllAwardByUserId(this.$store.state.user.id).then(response => {
        this.allTableData = response.data;
        for(let i=0;i<this.allTableData.length;i++)
        {
          if (this.allTableData[i].checkStatus!=="通过")
          {
            this.allTableData[i].result="无结果"
          }
        }
        this.setPaginations();
      })
    },
    toGetAwardOptions(){
      getAwardOptions().then(response =>{
        this.AwardOptions= response.data
      })
    },
    //查询提交
    onSubmit() {
      selectStudentAwardsByForm(
          this.formInline
      ).then(response => {
        this.allTableData = response.data;
        for(let i=0;i<this.allTableData.length;i++)
        {
          if (this.allTableData[i].checkStatus!=="通过")
          {
            this.allTableData[i].result="无结果"
          }
        }
        this.setPaginations();
      })
    },
    changeColor(result){
      if (result==="未通过")
      {
        return 'danger';
      }else if((result === '通过')||(result === '已出结果'))
      {
        return 'success';
      }else if((result === '无结果')||(result === '未申请'))
      {
        return 'info';
      }else {
        return 'warning';
      }
    },
    handleSizeChange(page_size) {
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.tableData = this.allTableData.filter((item, index) => {
        return index < page_size;
      });
    },
    handleCurrentChange(page) {
      this.paginations.page_index =page;
      let index = this.paginations.page_size * (page - 1);
      let nums = this.paginations.page_size * page;
      let tables = [];   // 存储跳转页面要显示的记录

      for (let i = index; i < nums; i++) {
        if (this.allTableData[i]) {
          tables.push(this.allTableData[i]);
        }
        this.tableData = tables;
      }
    },
    setPaginations(){
      this.paginations.total = this.allTableData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 5;
      //设置默认的分页数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
    toAwardDetails(currentRow){
      this.$router.replace({path: '/Student/AwardDetails', query:{id: currentRow.awardId}})
    },
  }
}

</script>
<style scoped>
.main {
  display: flex;
  flex-direction: column;
}
.head {
  margin-top: 20px;
  margin-right: 100px;
}
.body {
  margin-top: 10px;
  display: flex;
  margin-left: 50px;
  flex-direction: column;
  justify-content: center;
}
</style>
